<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>特色功能点</title>
    <link rel="stylesheet" href="../css/bootstrap4.5.min.css">
    <link rel="stylesheet" href="../css/public.css">
    <script src="../js/jquery-3.5.1.min.js"></script>
    <script src="../js/bootstrap4.5.min.js"></script>

    <style>

        /*https://fkwwhcm10.jz.fkw.com/?previewDemo=true   首页第三个模块  猫头鹰播放视频*/
        .imgText_mix_list_left {
            padding-left: 0;
            padding-right: 0;
            height: 372px;
            cursor: pointer;
            overflow: hidden;
        }

        .imgText_mix_list_left img {
            width: 100%;
            height: 100%;
        }

        .imgText_mix_list_left img:nth-child(2) {
            display: inline-block;
            position: absolute;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            cursor: pointer;
            opacity: 0;

        }

        .imgText_mix_list_left:hover img:nth-child(2) {
            transition: 0.5s;
            opacity: 1;
        }
        .imgText_mix_list_left:hover img{
            transform: scale(1.05);
            transition: 0.5s;
        }
        .imgText_mix_list_right {
            padding: 40px 0 0 40px ;
        }
        .imgText_mix_list_right  h2{
            padding-bottom: 28px;
            font-size: var(--f_title);
            line-height: var(--l_title);
            color: var(--c_text);
        }
        .imgText_mix_list_right  p{
            font-size: var(--f_describe);
            line-height: var(  --l_describe);
            color: var(--c_text);
        }
        .imgText_mix_list_right  button{
            margin-top: 32px;
            width: 182px;
            height: 42px;
            border-radius: 25px;
            border: none;
            background: var(--c_text);
            color: #fff;
        }

       video{
           position: absolute;
           top: 0;
           bottom: 0;
           left: 0;
           right: 0;
           margin: auto;
           width: 960px;
           height: 540px;
            outline: none;
        }
         .imgText_mix_video{
             display: none;
         }
         video{
             z-index: 10;
         }
         .imgText_mix_curtain{
             width: 100%;
             height: 100%;
             position: fixed;
             top: 0;
             background: rgba(0, 0, 0, 0.5);
             display: none;
             z-index: 9;
         }
         @media(max-width:1200px){ 
            .imgText_mix_list_left {
            height: 372px;
        }
        .imgText_mix_list_right {
            padding: 20px 0 0 20px ;
            text-align: center;
        }
        .imgText_mix_list_right  h2{
            padding-bottom: 14px;
        }
        .imgText_mix_list_right  button{
            margin-top: 16px;
        }
       video{
           width: 100%;
           height: 540px;
        }
         }
         @media(max-width:768px){
            .imgText_mix_list_left {
            height: 300px;
        }
    }
    </style>
</head>

<body>
    <div class="imgText_mix modular">
        <div class="imgText_mix_box row public_width">
            <div class="imgText_mix_list_left col-xl-7 col-12">
                <img src="../images/imgText_mix_ying.jpg" alt="">
                <img src="../images/product1.jpg" alt="">
            </div>
            <div class="imgText_mix_list_right col-xl-5 col-12">
                    <h2>共同见证，如何把细节做到精致</h2>
                    <p>6年</p>
                    <p>200+企业或单位</p>
                    <p>500+场活动</p>
                    <p>承“让品牌更具价值”的发展理念</p>
                    <p>致力于品牌价值的研究与实践</p>
                    <p>传播高价值的品牌咨询和策划</p>
                    <p>光荣归功于过去，未来着眼于现在</p>
                    <button onclick="javascript:window.location.href='../customer_list（客户列表）/customer_list1.html'">Learn More</button>
            </div>
        </div>
        <div class="imgText_mix_video ">
             <video src="http://0.ss.faisys.com/image/rimage/module/online_flv/Sun.mp4 " autoplay controls>
            </video>
        </div>
        <div class="imgText_mix_curtain"></div>
    </div>
    <script>
        $(function(){
            $(".imgText_mix_list_left").click(function(){
                $(".imgText_mix_video").toggle();
                $(".imgText_mix_curtain").css(
                    "display","block"
                )
            })
            $(".imgText_mix_curtain").click(function(){
                $(".imgText_mix_video").toggle();
                $(this).toggle();
            })
        })
    </script>
</body>

</html>